<template>
        <el-row>
            <el-col :span="6">
                <div class="list">
                <dv-decoration-11 :color="['red', 'green']" style="width:100%;height:8vh;"><dv-digital-flop :config="config1" /></dv-decoration-11>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="list">
                <dv-decoration-11 :color="['red', 'green']" style="width:100%;height:8vh;"><dv-digital-flop :config="config2" /></dv-decoration-11>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="list">
                <dv-decoration-11 :color="['red', 'green']" style="width:100%;height:8vh;"><dv-digital-flop :config="config3" /></dv-decoration-11>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="list">
                <dv-decoration-11 :color="['red', 'green']" style="width:100%;height:8vh;"><dv-digital-flop :config="config4" /></dv-decoration-11>
                </div>
            </el-col>
        </el-row>
</template>
<script setup>
import { inject, computed } from 'vue';
const wsState = inject('wsState');
const number = computed(() => wsState.number);
const config1 = computed(() => ({
    number: [number.value.out],
    content: '出舍人数:{nt} 人',
    style: { fontSize: 2.5 + 'vw', fill: '#FFFFFF' }
}))
const config2 = computed(() => ({
    number: [number.value.in],
    content: '入舍人数:{nt} 人',
    style: { fontSize: 2.5 + 'vw', fill: '#FFFFFF' }
}))
const config3 = computed(() => ({
    number: [number.value.notBack],
    content: '长期未归人数:{nt} 人',
    style: { fontSize: 2 + 'vw', fill: '#FFFFFF' }
}))
const config4 = computed(() => ({
    number: [number.value.notOut],
    content: '长期未出人数:{nt} 人',
    style: { fontSize: 2 + 'vw', fill: '#FFFFFF' }
}))
</script>
<style>
.list {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 8vh;
}
</style>